<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="css/bootstrap-reboot.css">
    <link rel="stylesheet" href="css/bootstrap-grid.css">
    <link rel="stylesheet" href="css/bootstrap.css">

    <title>Workers</title>
</head>
<body>

<main class="container">

    <div class="card col-sm-7 col-xs-12 mx-auto my-5 bg-light">
        <section class="card-body row align-items-center">
            <h5 class="card-title col-12 border-bottom">Personal Date</h5>
            <div class="col-sm-3 col-5">
                <p class="card-text">Name</p>
                <p class="card-text">Last</p>
                <p class="card-text">Gender</p>
                <p class="card-text">Date Born</p>
                <p class="card-text">Date Start</p>
            </div>
            <div class="col-sm-4 col-7">
                <label>
                    <input class="form-control form-control-sm" type="text" readonly>
                </label>
                <label>
                    <input class="form-control form-control-sm" type="text" readonly>
                </label>
                <label>
                    <input class="form-control form-control-sm" type="text" readonly>
                </label>
                <label>
                    <input class="form-control form-control-sm" type="text" readonly>
                </label>
                <label>
                    <input class="form-control form-control-sm" type="text" readonly>
                </label>
            </div>
            <div class="offset-sm-1 col-sm-4 mt-3 mt-sm-0">
                <img class="img-thumbnail" src="img/KevinSpace.jpg" alt="Photo">
            </div>
        </section>

        <section class="card-body row align-items-center">
            <h5 class="card-title col-12 border-bottom">Salary</h5>
            <label for="input-salary" class="col-sm-4 col-4 text-center col-form-label">Salary</label>
            <div class="input-group col-sm-4 col-8">
                <div class="input-group-prepend">
                    <span class="input-group-text">$</span>
                </div>
                <input id="input-salary" class="form-control" type="text">
            </div>
            <button class="col-sm-4 col-12 mt-3 mt-sm-0 btn btn-primary">Modify</button>
        </section>

        <section class="card-body row row-cols-2 my-3">
            <h5 class="card-title col-12 border-bottom">Calculus</h5>

            <div class="col-7 col-sm-6">
                <button class="col-12 btn btn-block btn-outline-primary text-nowrap">Calculate Age</button>
                <button class="col-12 btn btn-block btn-outline-primary text-nowrap">Calculate Old</button>
                <button class="col-12 btn btn-block btn-outline-primary text-nowrap">Calculate Pre</button>
            </div>

            <div class="col-5 col-sm-6">
                <label class="col-12">
                    <input class="form-control" type="text" readonly>
                </label>
                <label class="col-12">
                    <input class="form-control" type="text" readonly>
                </label>
                <label class="col-12">
                    <input class="form-control" type="text" readonly>
                </label>
            </div>
        </section>

        <section class="card-body row row-cols-2 align-items-center">
            <h5 class="card-title col-12 border-bottom">Extension Points</h5>

            <div class="col-6">
                <button class="btn btn-block btn-outline-secondary">Option 1</button>
            </div>

            <div class="col-6">
                <button class="btn btn-block btn-outline-secondary">Option 2</button>
            </div>
        </section>
    </div>

</main>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous"></script>
<script src="js/bootstrap.bundle.js"></script>
<script src="js/bootstrap.js"></script>

</body>
</html>